<template>
  <div class="mood-tracker-container">
    <h2>心情记录</h2>
    
    <div class="mood-input">
      <el-form :model="moodForm" label-position="top">
        <el-form-item label="今天的心情">
          <el-rate
            v-model="moodForm.rating"
            :colors="colors"
            :texts="moodTexts"
            show-text
          />
        </el-form-item>
        
        <el-form-item label="记录一下">
          <el-input
            v-model="moodForm.note"
            type="textarea"
            :rows="4"
            placeholder="写下此刻的想法..."
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveMood">保存记录</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="mood-history">
      <h3>历史记录</h3>
      <el-timeline>
        <el-timeline-item
          v-for="mood in moodHistory"
          :key="mood.id"
          :timestamp="formatDate(mood.date)"
          :type="getMoodType(mood.rating)"
        >
          <el-card>
            <div class="mood-item">
              <el-rate
                v-model="mood.rating"
                disabled
                :colors="colors"
                :texts="moodTexts"
                show-text
              />
              <p class="mood-note">{{ mood.note }}</p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const moodForm = ref({
  rating: 3,
  note: ''
})

const moodHistory = ref([])

const colors = {
  1: '#F56C6C',
  2: '#E6A23C',
  3: '#909399',
  4: '#67C23A',
  5: '#409EFF'
}

const moodTexts = ['很差', '不好', '一般', '不错', '很好']

const saveMood = () => {
  if (moodForm.value.note.trim()) {
    moodHistory.value.unshift({
      id: Date.now(),
      date: new Date(),
      rating: moodForm.value.rating,
      note: moodForm.value.note
    })
    moodForm.value.note = ''
  }
}

const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

const getMoodType = (rating) => {
  const types = ['danger', 'warning', 'info', 'success', 'primary']
  return types[rating - 1]
}
</script>

<style scoped>
.mood-tracker-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.mood-input {
  margin-bottom: 40px;
}

.mood-history {
  margin-top: 40px;
}

.mood-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mood-note {
  margin: 10px 0;
  color: #666;
}
</style> 